<template>
  <div class="reviews">
      <h3>用户评论</h3>
      <div class="reviews-list">
        <div class="clearFix reviews-head">
          <div class="fl">★★★★★</div>
          <div class="fr">z*0  2019-03-15</div>
        </div>
        <p>导游小洁美女服务周到，讲解细致，整体时间安排较好，错开了人流高峰。荆轲刺秦王的互动演出有特色，有幸扮演大臣夏无几，并有一个动作和台词，更近距离的观看了表演，演员也很入戏，值得一看！参观秦始皇兵马俑，三分看，七分听，通过详细的讲解，更加深入的了解历史，好好的补了一节历史课！</p>
        <ul class="clearFix">
          <li><img src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/fusion/20193/649a2428c3daf04b11b61c99466355da.jpg_228x168_90eb2e68.jpg" alt=""></li>
          <li><img src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/fusion/20193/9ba400d48426eb9f61a6c78c83465725.jpg" alt=""></li>
          <li><img src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/fusion/20193/7ce16ed325e0259612d358cadfdb89cc.jpg" alt=""></li>
          <li><img src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/fusion/20193/04fa9c30924ea4cc686007e145e67f68.jpg_228x168_3e9e78f9.jpg" alt=""></li>
          <li><img src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/fusion/20193/b77f679e04a2c63246ef5fd48057e79c.jpg_228x168_e69382ab.jpg" alt=""></li>
          <li><img src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/fusion/20193/04fa9c30924ea4cc686007e145e67f68.jpg_228x168_3e9e78f9.jpg" alt=""></li>
        </ul>
      </div>
      <div class="reviews-ck">查看全部评论</div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        "reviews":[
          {
            "id":"01",
            "title":"整个行程安排还算可以、导游张锐全程解说、但是语速太快、接车时间很准时、虽然说不带购物、但是导游一路上说着说着就说到了什么陕西三绝绕了一大圈、夸赞有多少国家领导人来参观演出过、最后就是个商业演出、个人观后感、没来过的可以看看、但并没有导游说的那么精彩、套路！导游这样形容完后、车上有二十多个团员都买了门票、无奈家人想看只好陪同、全程最精彩部分是兵马俑博物馆解说员编号775号老师的精彩解说、兵马俑不虚此行！775号老师知识渊博、风趣幽默！最大收获！了解历史！兵马俑参观完买了芙蓉玉和水草玉髓、感觉好贵、但是是兵马俑内部景区唯一一家、导游说有全程监督、求心安贵也认了！最吐槽的是团餐、不但要走很远一段路而且真心是巨难吃！原定17:00结束的行程、因为行程单这样安排、本来想多感受一下兵马俑的震撼、但是导游要求16:10最晚就要集合返回市区！时间有点紧破、遗憾！这段点评来自我的良心反馈？只为提供给大家最真实的体验！途中导游要求全车人刷好评、个人比较反感、更希望一切做到真实！用心点评、留给有需要的人！",
            "date":"z*0  2019-03-15",
            "img":[
              "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/fusion/20192/d8b1ffa351dc93a3861aca62ad7b93f3.jpg_228x168_ba043d7b.jpg",
              "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/fusion/20192/1a59012e5e99415179a6acca2ee0b2d2.jpg_228x168_225ff619.jpg",

            ]
          }
        ]
      }
    }
  }
</script>
<style scoped>
  .reviews{
    margin-bottom: .2rem;
    overflow:hidden;
  }
  .reviews h3{
    position: relative;
    padding: 0 .2rem;
    height: .88rem;
    background: #fff;
    color: #333;
    font-size: .3rem;
    line-height: .88rem;
    text-indent: .2rem;
    font-weight: normal;
    border-bottom: 1px solid #f5f5f5;
  }
  .reviews h3:after{
    content:"";
    display: block;
    position: absolute;
    top: .3rem;
    left: .2rem;
    width: .06rem;
    height: .24rem;
    background: #1ba9ba;
    border-radius: .04rem;
  }
  .reviews-head{
    line-height: .28rem;
    font-size: .24rem;
    vertical-align: middle;
    color: #212121;
    margin-top: .2rem;
    padding:.2rem 0;
  }
  .reviews-list{
    background: #fff;
    padding:0 .2rem;
    border-bottom: 1px solid #f5f5f5;
  }
  .reviews-head>.fl{
    color: #ffb436
  }
  .reviews-list p{
    height: 105px;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    line-height: .42rem;
    font-size: .26rem;
    color: #616161;
    margin-bottom: .4rem;
  }
  .reviews-list>ul{
    margin-bottom: .3rem;
  }
  .reviews-list>ul>li{
    width:32.3%;
    float: left;
    margin-bottom: .1rem;
    margin-right: .1rem;
    box-sizing: border-box;
  }
  .reviews-list>ul>li:nth-child(3n){
    margin-right: 0;
  }
  .reviews-list>ul>li img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .reviews-ck{
    text-align: center;
    margin-top: -.02rem;
    height: .8rem;
    background: #fff;
    color: #616161;
    line-height: .8rem;
    font-size: .28rem;
    border-top: 1px #f5f5f5 dashed;
  }
</style>
